<template>
  <v-page class="bg-light">
    <view class="item" v-for="item in datas" :key="item">
      <view class="bg-bg fn-sm color-default p-x-lg"> {{ item.to }} </view>
      <view class="layout-main color-default fn-sm msg">
        <p class="p-b-md">{{ item.app_verson }}</p>
        <p class="p-b-md">
          {{ item.pho_name }}&nbsp;&nbsp;&nbsp;{{ item.pho_verson }}
        </p>
        <view class="color-tips">
          <p class="p-b-md">{{ item.ip }}&nbsp;&nbsp;-{{ item.place }}</p>
          <p class="p-b-md">登录时间:{{ item.publish_at }}</p>
        </view>
        <view class="color-red fn-right" v-if="item.to == '本机'">
          登出其他所有设备
        </view>
      </view>
    </view>
  </v-page>
</template>

<script>
export default {
  data() {
    return {
      datas: [
        {
          to: "本机",
          app_verson: "微聊正式版 1.0.2",
          pho_name: "HONORYAL-AL00",
          pho_verson: "Android10",
          ip: "119.123.31.92",
          place: "广东,深圳",
          publish_at: "2020-09-21 14:22",
        },
        {
          to: "iPhone",
          app_verson: "微聊正式版 1.0.2",
          pho_name: "铭辉的iPhone",
          pho_verson: "iPhone iOS11.2.1",
          ip: "119.123.31.92",
          place: "广东,深圳",
          publish_at: "2020-09-21 14:22",
        },
        {
          to: "Android设备",
          app_verson: "微聊正式版 1.0.2",
          pho_name: "HONORYAL-AL00",
          pho_verson: "Android10",
          ip: "119.123.31.92",
          place: "广东,深圳",
          publish_at: "2020-09-21 14:22",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.msg {
  padding: 20rpx 90rpx;
}
</style>